<template>
  <div>
    <div class="percenter-box">
      <!--头部-->
      <input type="hidden" id="sensorDataProject" value="taoshouyou" />
      <input type="hidden" value="" id="needToastInfo" />
      <!--个人信息-->
      <div class="userinfo">
        <p v-if="mm">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2F50%2Fv2-e73ebe5fb7fbae39d69ed94dcc82f145_hd.jpg&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621412654&t=9931ece023187ec2193c052fa7ea2380"
            class="info-portrait"
          /><br /><b>{{name.data.name}}</b>
        </p>
        <router-link to="/denlu" v-else>登录</router-link>
        <router-link to="/percenset"
          ><img
            src="https://m.taoshouyou.com/img/percenter/setting.png"
            class="info-setting"
        /></router-link>
      </div>
      <div class="tool-box" v-if="mm">
        <div class="tool-wallet">
          <router-link to="/money">
            <div>{{name.money}}</div>
            <div>余额</div>
          </router-link>
        </div>
        <div class="tool-collect">
          <router-link to="/coll">
            <div>{{ m }}</div>
            <div>收藏</div>
          </router-link>
        </div>
        <div class="tool-trace">
          <router-link to="#">
            <div>0</div>
            <div>足迹</div>
          </router-link>
        </div>
      </div>
      <div class="buyer-box" v-if="mm">
        <div class="item-title">我是买家</div>
        <div>
          <!--我是买家-->
          <ul>
            <li v-for="(item, index) in tradelist" :key="index">
              <router-link :to="item.router + `/${index}/` + item.to">
                <img :src="item.img" />
                <p>{{ item.name }}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="seller-box" v-if="mm">
        <div class="item-title">我是卖家</div>
        <div>
          <!--我是卖家-->
          <ul>
            <li v-for="(item, index) in selllist" :key="index">
              <router-link :to="item.router + `/${index}`">
                <img :src="item.img" />
                <p>{{ item.name }}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div class="often-box" v-if="mm">
        <div class="item-title">常用工具</div>
        <div>
          <!--我是买家-->
          <ul>
            <li>
              <router-link to="/zhanghao"
                ><img
                  src="https://m.taoshouyou.com/img/percenter/bangding.png"
                />
                <p>绑定手机</p>
              </router-link>
            </li>
            <li>
              <router-link to="/kefu"
                ><img src="https://m.taoshouyou.com/img/percenter/kefu.png" />
                <p>客服</p>
              </router-link>
            </li>
            <li>
              <router-link to="/yanzheng"
                ><img
                  src="https://m.taoshouyou.com/img/percenter/zhenjia.png"
                />
                <p>真假客服验证</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <!--操作区域-->
      <!-- 全站ad -->

      <div class="ad-pop-box js-ad-pop">
        <a
          href="https://9.taoshouyou.com/app/download"
          data-adpage="/user/assets/index"
          data-adpageen="center_sdk_download_ad"
          target="_blank"
        >
          <img
            src="../assets/img/d67d06d987ceda787b1153ab5dcd3108.jpg"
            alt=""
          />
        </a>
      </div>
      <input
        type="hidden"
        value="https://passport.taoshouyou.com"
        id="comurl"
      />
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    tradelist() {
      return this.$store.state.percen.tradelist;
    },
    selllist() {
      return this.$store.state.percen.selllist;
    },
    m() {
      return this.$store.state.percen.orderlist.length;
    },
    mm(){
      return this.$store.state.percen.is
    },
    i(){
      return this.$store.state.percen.i
    },
    name(){
      return this.$store.state.percen.user
    }
  },
};
</script>

// <style lang="less" scoped>
@import url("../assets/css/site.css");
@import url("../assets/css/user_center.css");
.info-portrait {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 54%;
    margin-top: 0.2rem;
}
</style>